<!DOCTYPE html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选项管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrapValidator.min.css" />
<link rel="stylesheet" type="text/css" href="${contextPath}/css/public.css">
<script type="text/javascript" src="${contextPath}/js/jquery.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${contextPath}/js/common.js"></script>
<script type="text/javascript" src="${contextPath}/js/bootstrapValidator.min.js"></script>
<style type="text/css">
.col-xs-4 {
	padding-right: 0px;
	padding-left: 0px;
}

.col-xs-2 {
	padding-right: 0px;
	padding-left: 0px;
}

.col-xs-3 {
	padding-right: 0px;
	padding-left: 0px;
}

.col-xs-5 {
	padding-right: 0px;
	padding-left: 0px;
}

.col-xs-7 {
	padding-right: 0px;
	padding-left: 0px;
}

#addCode {
	margin-top: 30px;
}
</style>
<body>
	<div class="container-fluid">
		<div class="row">
			<section>
				<div class="col-xs-12">
					<form action="${contextPath}/security/addCode" method="post" id="addCode" name="addCode" role="form" class="form-horizontal">
						<div class="form-group">
							<!-- 产品名称 -->
							<label for="codeKey" class="col-xs-offset-1 col-xs-2 control-label">名称：</label>
							<div class="col-xs-4 ">
								<select class="form-control" name="codeKey" id="codeKey">
									<optgroup label="名称">
										<option value="产品名称" selected="selected">产品名称</option>
										<option value="产品型号">产品型号</option>
										<option value="产品厚度">产品厚度</option>
										<option value="产品材质">产品材质</option>
										<option value="产品颜色">产品颜色</option>
										<option value="货站信息">货站信息</option>
									</optgroup>
									

								
								</select>
							</div>
						</div>
						<div class="form-group">
							<!-- 规格型号 -->
							<label for="codeValue" class="col-xs-offset-1 col-xs-2 control-label">值：</label>
							<div class="col-xs-7">
								<input class="form-control" name="codeValue" type="text" placeholder="值" autocomplete="off">
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-offset-3 col-xs-4">
								<button type="submit" class="btn btn-success" id="add">添加</button>
								<button type="button" class="btn btn-primary" id="close">关闭</button>
							</div>
						</div>
					</form>
				</div>
			</section>
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#close").click(function() {
				window.close();
			});
			//初始化产品名称查询
			$.ajax({
				type : 'POST',
				data : {},
				url : '${contextPath}/security/codeSelectProduct?codeKey=产品名称',
				dataType : 'json',
				success : function(data) {
					$("#codeKey").append('<optgroup label="产品名称" id="product">');
					$.each(data.list, function(i, item) {
						$("#product").append('<option value="'+item.codeValue+'">'+item.codeValue+'</option>"');
					});
					$("#codeKey").append('</optgroup>');
				}
			});

			//==================================================================================================================
			$('#addCode').bootstrapValidator({
				live : 'enabled',
				submitButtons : 'button[type="submit"]',
				message : 'This value is not valid',
				feedbackIcons : {
					valid : 'glyphicon glyphicon-ok',
					invalid : 'glyphicon glyphicon-remove',
					validating : 'glyphicon glyphicon-refresh'
				},
				fields : {
					codeValue : {
						validators : {
							notEmpty : {
								message : '值不能为空'
							}
						}

					}
				}
			});

			//$('#addCustomer').bootstrapValidator();
			$('#add').click(function() {
				var bootstrapValidator = $('#addCode').data('bootstrapValidator');
				//手动触发验证
				bootstrapValidator.validate();
				if (bootstrapValidator.isValid()) {
					//表单提交的方法、比如ajax提交
					addCode.submit();
				}

			});

		});
	</script>
</body>
</html>

